<script setup lang="ts">
// lang="ts" 开启typescript
import TodoHead from './components/TodoHead.vue';
import TodoList from './components/TodoList.vue';
import TodoTab from './components/TodoTab.vue';
import {ref,computed} from 'vue'
import {ToDoArr} from './Impl/TodoImpl'
import {  } from '@vue/reactivity';

let todoArray=ref<ToDoArr>([
    {id:1,text:"学习vue",done:true}
]);
let id=ref<number>(2);
let addItem=(text:string)=>{
    todoArray.value.push({
        id:id.value,
        text,
        done:false
    });
    id.value++;
}
//记录点击tab项
let status=ref(1);//1 全部 2已完成 3未完成
let changeStatus=(s:number)=>{
    status.value=s;
}
let filterArray=computed<ToDoArr>(()=>{//计算属性声明数据类型
    switch(status.value){
        case 2:
            return todoArray.value.filter(t=>t.done);
        case 3:
            return todoArray.value.filter(t=>!t.done);
        default:
            return todoArray.value;
    }
});
//ref获取dom元素的ts类型声明
type MYELEMENT=HTMLElement|null; //联合声明别名
let myspan=ref<MYELEMENT>(null);
</script>

<template>
    <TodoHead @addItem="addItem"></TodoHead>
    <TodoTab @changeStatus="changeStatus" :status="status" :todoarray="todoArray"></TodoTab>
    <TodoList  
        a="abc" 
        :todoarray="filterArray"
        :n="123" ></TodoList>
        <span ref="myspan">hello</span>
</template>

<style lang="scss" scoped>
</style>
